<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      :header-cell-style="headFirst"
      :cell-style="cellStyle"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="时间轴" width="40" fixed="left" align="center">
        <el-table-column prop="remarks" min-width="40">
          <template #default="scope">
            <div class="flex-x-between px-10">
              <span>{{ scope.row["remarks"] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dictLabel" min-width="120">
          <template #default="scope">
            <div class="flex-x-between px-10">
              <span>{{ scope.row["dictLabel"] }}</span>
              <span class="fs-12">{{ scope.row["unit"] }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" :label="`${index}时`" width="80" v-for="(item, index) in 24" :key="index">
        <template #default="scope">
          <input
            type="text"
            v-model="scope.row[index]"
            class="ipt"
            :data-id="scope.row['$id' + index]"
            style="text-align: center"
            :style="{
              background: scope.row[index]
                ? (scope.row.minValue && scope.row[index] < parseFloat(scope.row.minValue)) ||
                  (scope.row.maxValue && scope.row[index] > parseFloat(scope.row.maxValue))
                  ? '#f30000'
                  : 'white'
                : 'white'
            }"
            @click="oldValue = scope.row[index]"
            @blur="iptBlur(scope, $event, index)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import type { CellStyle } from "element-plus";
import { computed, ref } from "vue";
interface Props {
  tableData: any[];
  // fieldMapping: { field1: string; field2: string };
}
const props = defineProps<Props>();
const headFirst = ({ rowIndex, columnIndex }: any): CellStyle<any> | undefined => {
  if (rowIndex === 1) {
    return { display: "none" };
  }
  if (columnIndex != 0) {
    return { background: "rgb(105 193 231)", color: "#fff", height: "30px" };
  }
};

let spanArr = computed<number[]>(() => {
  let arr: number[] = [];
  let pos = 0;
  for (let i = 0; i < props.tableData.length; i++) {
    if (i === 0) {
      arr.push(1); //空数组，用来记录需要合并的行数
      pos = 0; //标识
    } else {
      // 判断当前元素与上一个元素是否相同⬇️
      if (props.tableData[i].remarks === props.tableData[i - 1].remarks) {
        arr[pos] += 1;
        arr.push(0); //相同则上一行合并数+1，本行合并数为0
      } else {
        arr.push(1); //不相同则另起一行
        pos = i;
      }
    }
  }
  return arr;
});

const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  if (columnIndex === 0) {
    const _row = spanArr.value[rowIndex]; //将每一行传入上述方法，获取到每一行的合并行数
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row, //合并行
      colspan: _col //合并列
    };
  }
};
const cellStyle = ({ columnIndex }: any) => {
  if (columnIndex === 0) {
    return { background: "#aba5c7" };
  }
  if (columnIndex === 1) {
    return { background: "#b4b2c7" };
  }
  return { background: "red" };
};
const emit = defineEmits<{
  change: [value: any, e: any]; // 具名元组语法
}>();
let oldValue = ref(""); //保存旧值
//失焦事件，使用事件对象拿到dom元素并进行后续样式的修改
const iptBlur = (value: any, e: any, index: number) => {
  if (e.target.value == oldValue.value || (oldValue.value == undefined && e.target.value == "")) {
    return;
  }
  emit(
    "change",
    {
      content: e.target.value,
      pointTime: index,
      type: value.row.dictValue,
      id: e.target.dataset.id
    },
    e
  );
};
</script>
<style scoped lang="scss">
// 设置表格中输入框为边框为0
.ipt {
  width: 100%;
  height: 36px;
  padding: 0;

  // background: rgba($color: #000000, $alpha: 0%);
  border: 0;
}
:deep(.el-table__cell) {
  padding: 0;
}
:deep(.cell) {
  padding: 0;
}
</style>
